<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>专题页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="stylesheet" href="../../res/layui002/css/layui.css" th:href="@{${rootPath} + '/res/layui/css/layui.css'}">
		<link rel="stylesheet" href="../../res/css/global.css" th:href="@{${rootPath} + '/res/css/global.css'}">
		<script src="../../res/js/jquery.min.js" th:src="@{${rootPath} + '/res/js/jquery.min.js'}"></script>
		<script src="../../res/layui002/layui.js" th:src="@{${rootPath} + '/res/layui/layui.js'}"></script>
	</head>

	<body>

		<div class="main">
			<div class="fly-panel">
<!--				<h3 class="fly-panel-title">推荐专题</h3>-->
				<fieldset class="layui-elem-field">
					<legend>筛选专题</legend>
					<div class="layui-field-box">
						<div  class="layui-form">
							<div class="layui-form-item">
								<div class="fly-tab fly-tab-index">
						<span>
						  <a href="#" class="tab-this">点赞</a>
						  <a href="#">评论</a>
						  <a href="jie/index.html">订阅</a>
						  <a href="user/index.html">总和</a>
						</span>
									<form action="http://cn.bing.com/search" class="fly-search">
										<i class="iconfont icon-sousuo"></i>
										<input class="layui-input" autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="q">
									</form>
								</div>
							</div>
						</div>
					</div>
				</fieldset>
				<ul class="fly-case-list" id="subject-list">
					<th:block th:if="${not #lists.isEmpty(subjectList)}">
						<th:block th:each="subject,index:${subjectList}">
							<li data-id="160">
								<a class="fly-case-img" href="#" target="_blank">
									<img src="../../res/images/avatar/default.png" th:src="subject" alt="">
									<cite class="layui-btn layui-btn-primary layui-btn-small">去围观</cite>
								</a>
								<h2><a href="#" target="_blank" th:text="${subject.subjectTitle}">标题</a></h2>
								<p class="fly-case-desc" th:text="${subject.subjectDes}">描述</p>
								<div class="fly-case-info">
									<a href="/u/2802912" th:href="'http://'+ ${user.userId}" class="fly-case-user" target="_blank">
										<img src="http://q.qlogo.cn/qqapp/101235792/5068B86B734FD45F863F69BE6A08A6FF/100" th:src="${user.avatar}">
									</a>
									<p class="layui-elip" style="font-size: 12px;"><span th:text="${user.nickName}" style="color: #666;">nacooo</span> <span th:text="${subject.createTime}">13天前</span> </p>
									<p>获得
										<a class="fly-case-nums fly-case-active" href="javascript:;" data-type="showPraise" style=" padding:0 5px; color: #01AAED;">6</a>个赞</p>
									<button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">订阅</button>
								</div>
							</li>
						</th:block>
					</th:block>

				</ul>
			</div>
		</div>

<!--		<th:block th:include="/html/common/footer::footer"></th:block>-->


	</body>
	<script th:inline="javascript">

        layui.use('flow', function(){
            var flow = layui.flow;
            var pageCount;
            flow.load({
                elem: '#subject-list', //流加载容器
                scrollElem: '#subject-list', //滚动条所在元素，一般不用填，此处只是演示需要。
                isAuto: false,
                isLazyimg: true,
                done: function(page, next){ //加载下一页
                    //模拟插入
                    setTimeout(function(){
                        var lis = [];
                        $.ajax({
                            type : 'POST',
                            url : "../subject/findSubjectList",
                            dataType : "json",
                            data : {
                                "pageNum":page,
                                "pageSize":6,
                                "like":1
                            },
                            success : function(result) {

                                pageCount = result.data.pages;

                                $.each(result.data.list,function(index,simple){
                                    lis.push('<li data-id="160"><a class="fly-case-img" href="#" target="_blank">' +
										'<img src="../../res/images/avatar/default.png" th:src="subject" alt="">' +
										'<cite class="layui-btnlayui-btn-primarylayui-btn-small">去围观</cite></a>' +
										'<h2><a href="#" target="_blank">'+simple.cmsSubject.subjectTitle+'</a></h2>' +
										'<p class="fly-case-desc">'+simple.cmsSubject.subjectDes+'</p>' +
										'<div class="fly-case-info"><a href="/u/2802912" th:href="" class="fly-case-user" target="_blank">' +
										'<img src="http://q.qlogo.cn/qqapp/101235792/5068B86B734FD45F863F69BE6A08A6FF/100" th:src="${user.avatar}"></a>' +
										'<p class="layui-elip"style="font-size:12px;"><span style="color:#666;">'+simple.ucenterUser.nickName+'</span>' +
										'<span th:text="${subject.createTime}">13天前</span></p>' +
										'<p>获得<a class="fly-case-nums fly-case-active" href="javascript:;" data-type="showPraise" style="padding:05px;color:#01AAED;">'+simple.likeNum+'</a>个赞</p>' +
										'<button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">订阅</button></div></li>');

                                    next(lis.join(''), page < pageCount);
                                    lis = [];
                                });

                            }
                        });
                    }, 500);
                }
            });

        });
	</script>
</html>